<mwl-demo-utils-calendar-header [(view)]="view" [(viewDate)]="viewDate" />

<div class="alert alert-info">
  Click on a day or time slot on the view. @if (clickedDate) {
  <strong>You clicked on this time: {{ clickedDate | date:'medium' }}</strong>
  } @if (clickedColumn !== undefined) {
  <strong>You clicked on this column: {{ clickedColumn }}</strong>
  }
</div>

<div>
  @switch (view) { @case ('month') {
  <mwl-calendar-month-view
    [viewDate]="viewDate"
    [events]="events"
    (columnHeaderClicked)="clickedColumn = $event.isoDayNumber"
    (dayClicked)="clickedDate = $event.day.date"
  />
  } @case ('week') {
  <mwl-calendar-week-view
    [viewDate]="viewDate"
    [events]="events"
    (dayHeaderClicked)="clickedDate = $event.day.date"
    (hourSegmentClicked)="clickedDate = $event.date"
  />
  } @case ('day') {
  <mwl-calendar-day-view
    [viewDate]="viewDate"
    [events]="events"
    (hourSegmentClicked)="clickedDate = $event.date"
  />
  } }
</div>
